<template>
	<view class="container">
		<view class="header_bg"></view>
		<view @click="gotoInfo()" style="margin-left: 15px; padding-top: 80px; width: 100%">
			<image :src="userinfo.image" class="info_logo"></image>
			<text style="position: absolute; line-height: 90px; font-size: 30px; margin-left: 20px; color: white">{{ userinfo.username }}</text>
			<!-- <uni-icons type="right" size="30" style="float: right;line-height: 80px;color: white;margin-right: 30px;z-index: 9 !important;"></uni-icons> -->
		</view>

		<!-- <view class="section">
			<text>个性化</text>
			<uni-row class="tools" style="margin-bottom: 10px;">
				<uni-col :span="8">
					<image src="../../static/c1.png"></image>
				</uni-col>
				<uni-col :span="8">
					<image src="../../static/c1.png"></image>
				</uni-col>
				<uni-col :span="8">
					<image src="../../static/c1.png"></image>
				</uni-col>
			</uni-row>
		</view> -->

		<view class="section" style="margin-top: 60px">
			<uni-list>
				<uni-list-item ellipsis="1" :title="$t('my.AQIDescription')" @click="gotoPage('AQI')" clickable showArrow />
				<!-- <uni-list-item ellipsis="1" :title="$t('my.AQS')" @click="gotoPage('favorite')" clickable showArrow /> -->
				<!-- <uni-list-item ellipsis="1" :title="$t('my.AQAM')" clickable showArrow /> -->
				<uni-list-item ellipsis="1" :title="$t('my.TermsOfUse')" @click="gotoPage('service')" clickable showArrow />
				<uni-list-item ellipsis="1" :title="$t('my.PrivacyAgreement')" @click="gotoPage('privacy')" clickable showArrow />
				<uni-list-item ellipsis="1" :title="$t('my.Feedback')" @click="gotoPage('feedback')" clickable showArrow />
				<uni-list-item ellipsis="1" :title="$t('my.AboutUs')" @click="gotoPage('about')" clickable showArrow />
				<uni-list-item ellipsis="1" :title="$t('my.Locale')" @click="onChangeLocale" clickable showArrow />
			</uni-list>
		</view>
	</view>
</template>

<script>
import { getUserId } from '@/common/tools.js';

export default {
	data() {
		return {
			userinfo: {
				username: 'niming',
				image: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png'
			}
		};
	},
	onLoad() {
		let systemInfo = uni.getSystemInfoSync();
		this.isAndroid = systemInfo.platform.toLowerCase() === 'android';
	},
	onShow() {
		this.getUserInfo();
	},
	methods: {
		getUserInfo() {
			console.log(getUserId());
			this.$http.get(this.$api.userinfo.url + '/' + getUserId()).then((res) => {
				console.log(res);
				this.userinfo = res.result;
			});
		},
		gotoInfo() {
			uni.navigateTo({
				url: '/pages/my/info'
			});
		},
		gotoPage(name) {
			uni.navigateTo({
				url: `/pages/my/${name}`
			});
		},
		onChangeLocale() {
			// uni.setLocale('zh-Hans');
			const currentLocale = uni.getLocale();
			const code = currentLocale === 'en' ? 'zh-Hans' : 'en';

			if (this.isAndroid) {
				uni.setLocale(code);
			} else {
				uni.setLocale(code);
				this.$i18n.locale = code;
			}
		}
	}
};
</script>

<style>
.header_bg {
	background-image: url('../../static/my/bg.png');
	width: 100%;
	height: 300px;
	position: absolute;
	top: 0px;
	z-index: 0;
}
.info_logo {
	width: 80px;
	height: 80px;
	border-radius: 50%;
}
.section {
	margin: 15px;
	border-radius: 10px;
	background-color: white;
}
.tools uni-col {
	text-align: center;
	margin: 0 auto;
}
.tools image {
	height: 60px;
	width: 60px;
}
</style>
